<template>
    <div>
        <Post>
            <post-item v-for="(item,index) in messages" :key="index">
                <img :src="item.cover" alt="" slot='left-img'>
                <h4 slot="right-title">{{ item.title }}</h4>
                <span slot="right-detail">{{ item.account }}</span>
            </post-item>
        </Post>
    </div>
</template>

<script>
import PostItem from './PostItem';
import Post from './Post';
    export default {
        props: {
            messages:{
                type:Array,
                default:()=>{
                    return []
                }
            }
        },
        components: {
            PostItem,
            Post
        },
    }
</script>

<style scoped>
img{
    width: 90px;
    height: 90px;
    vertical-align: middle;
}
h4{

    /* overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis; */

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
span{
    color:#c4cbd5;
}
</style>